<script setup>
import {
  Histogram,
  Grid,
  Tools,
  UserFilled,
  Avatar,
  StarFilled,
  ArrowDown,
  HomeFilled
} from '@element-plus/icons-vue'
import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/modules/user.js'
import { userGetUserService } from '@/api/user.js'
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
const home = ref(true)
const router = useRouter()
watch(
  () => router,
  () => {
    let path = router.currentRoute.value.path
    if (path !== '/home') {
      home.value = false
    }
  },
  {
    immediate: true,
    deep: true
  }
)
const nickName = ref('')
const userStore = useUserStore()
onMounted(async () => {
  let response = await userGetUserService()
  userStore.setUserInfo(response.data)
  nickName.value = userStore.userInfo.nickname
})
const onLogout = () => {
  userStore.setUserInfo({})
  userStore.setToken('')
  router.replace('/login')
}
const reouter = useRouter()
const toPage = (path) => {
  reouter.push(path)
}
const myMenu = ref(null)
watch(
  () => isDark,
  (newValue) => {
    if (newValue.getter()) {
      console.log('true')
    } else {
      console.log('false')
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<template>
  <div class="main">
    <div class="header">
      <div style="margin-left: 20px">
        <h1>天行健，君子以自强不息</h1>
      </div>

      <div style="margin-right: 20px">
        <el-avatar :size="50" :src="userStore.userInfo.userPic" alt="" />
        <div>
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ nickName }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-button text type="primary" disabled @click="toPage('/mine/profile')"
                    >基本资料</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text type="primary" disabled @click="toPage('/mine/avatar')"
                    >头像设置</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text type="primary" disabled @click="toPage('/mine/passwd')"
                    >密码设置</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button text type="primary" disabled @click="toggleDark">
                    {{ isDark ? '浅色主题' : '暗黑模式' }}
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-button text type="primary" @click="onLogout">退出登录</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="" style="flex: 1; display: flex; flex-direction: row">
      <div class="myMenu" ref="myMenu">
        <el-menu router :default-active="$route.path">
          <el-menu-item index="/dashboard">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/article">
            <template #title>
              <el-icon><Histogram /></el-icon>
              <span>文章管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/cate">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>分类管理</span>
            </template>
          </el-menu-item>
          <el-sub-menu index="/mine">
            <template #title>
              <el-icon><Tools /></el-icon>
              <span>资料设置</span>
            </template>
            <el-menu-item index="/mine/profile">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>基本资料</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/mine/avatar">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>头像设置</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/mine/passwd">
              <template #title>
                <el-icon><StarFilled /></el-icon>
                <span>密码修改</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div style="flex: 1; background-color: #f8f8f8; width: 100%; height: 100%">
        <!--        <echarts-page v-if="home" />-->
        <router-view />
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.header {
  background-color: #f2f2f2;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.myMenu {
  width: 160px;
}
.footer {
  background-color: #f2f2f2;
  width: 100%;
  height: 100px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
